<!DOCTYPE html>

<style>
  iframe {
    margin: 10px;
    padding: 10px;
    border: solid;
    width: 200px;
    height: 200px;
    float: left;
  }
</style>

<p>This test checks that selection of linebreaks works as expected with the different directions and writing modes.</p>
<p>The test passes if you can visually see the linebreaks selection in the different examples.</p>

<iframe srcdoc="
  <h3>Default</h3>
  <div id='target' contenteditable>foo<br><br><br><br>bar</div>
  <script>
    window.getSelection().setBaseAndExtent(target.firstChild, 2, target.lastChild, 2);
  </script>
"></iframe>

<iframe srcdoc="
  <h3>RTL</h3>
  <div id='target' style='direction: rtl;' contenteditable>foo<br><br><br><br>bar</div>
  <script>
    window.getSelection().setBaseAndExtent(target.firstChild, 2, target.lastChild, 2);
  </script>
"></iframe>

<iframe srcdoc="
  <h3>vertical-lr</h3>
  <div id='target' style='writing-mode: vertical-lr;' contenteditable>foo<br><br><br><br>bar</div>
  <script>
    window.getSelection().setBaseAndExtent(target.firstChild, 2, target.lastChild, 2);
  </script>
"></iframe>

<iframe srcdoc="
  <h3>vertical-lr &amp; RTL</h3>
  <div id='target' style='writing-mode: vertical-lr; direction: rtl;' contenteditable>foo<br><br><br><br>bar</div>
  <script>
    window.getSelection().setBaseAndExtent(target.firstChild, 2, target.lastChild, 2);
  </script>
"></iframe>

<iframe srcdoc="
  <h3>vertical-rl</h3>
  <div id='target' style='writing-mode: vertical-rl;' contenteditable>foo<br><br><br><br>bar</div>
  <script>
    window.getSelection().setBaseAndExtent(target.firstChild, 2, target.lastChild, 2);
  </script>
"></iframe>

<iframe srcdoc="
  <h3>vertical-rl &amp; RTL</h3>
  <div id='target' style='writing-mode: vertical-rl; direction: rtl;' contenteditable>foo<br><br><br><br>bar</div>
  <script>
    window.getSelection().setBaseAndExtent(target.firstChild, 2, target.lastChild, 2);
  </script>
"></iframe>
